:root {
    --head_color: #55433b;
    --text_color:#bda79e;
    --brown: #cc561e;
    --dark_brown:#5d270e;
    --green: #108e26;
    --dark_green:#005a00;
    --bg_color: #f5f5dc;
}

.rotate_screen {
    display: none;
}

@media (orientation: portrait) {
    .rotate_screen {
        display: block;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        text-align: center;
    }

    .rotate_screen img {
        margin-top: 20rem;
        width: 45rem;
        height: 45rem;
    }

    .rotate_screen img:hover {
        transform: scale(1.1);
    }

    .rotate_screen h1 {
        margin-top: 10rem;
    }

    body {
        background-color: #242424;
    }
    .main_menu {
        display: none;
    }
}



@media (orientation: landscape) {
    body {
        background-color: var(--bg_color);
        font-family: Arial, sans-serif;
    }

    h1 {
        color: var(--head_color);
        font-size: 2rem;
        text-align: center;
        margin: 1rem;
    }

    .task_bar {
        display:  flex;
        border: 2.2px solid var(--brown);
        background-color: var(--dark_green);
        border-radius: 0.7rem;
        padding: 1rem;
        margin: 1rem;
        -ms-flex-align: center;
        justify-content: center;
    }
    .task_bar button {
        background-color: var(--green);
        color: white;
        border: 2.2px solid var(--dark_brown);
        border-radius: 1.5rem;
        padding: 0.6rem 1.25rem;
        text-align: center;
        display: inline-block;
        font-size: 1.5rem;
        margin: 0.5rem 1rem;
        cursor: pointer;
    }
    .task_bar img {
        width: 3.9rem;
        height: 3.9rem;
    }

    button:hover {
        color: #e4e4e4;
        transform: scale(1.1) translateY(-0.1rem);
        box-shadow:0 0.1rem 0.15rem #b53701;
    }

    .start_button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 4rem;
    }

    .start_button button {
        background-color: var(--green);
        color: #fb2a00;
        border: 0.3rem solid var(--dark_brown);
        border-radius: 120rem;
        padding: 3.70rem 2.2rem;
        text-align: center;
        text-decoration: none;
        font-size: 3rem;
        cursor: pointer;
    }
}